<template>
	<div class="flexcenter positionr">
		<div class="max_width padding15 flexbetween align_start">
			<div class="radius" style="width: 75%; background-color: rgba(0, 0, 0, 0);">
				<!-- 标题 -->
				<!-- <div class="mainpadding line_bottom">
                    <div class="text_i color_three textcenter">2023年【高校专属福利】公考暑假作业试卷</div>
                    <div class="flexcenter margin_top2">
                        <div class="text_d color_six margin_right5">考试题数：100道</div>
                        <div class="text_d color_six margin_right5">考试时间：46分钟</div>
                        <div class="text_d color_six">试卷满分：100分</div>
                    </div>
                </div> -->
				<!--  v-show="index===swipercurrent" -->
				<div class="mainpadding" v-for="(item,index) in list.data" :id="'swiper'+item.id" :key="item.id"
					v-show="index===swipercurrent">
					<div class="typeBox" v-if="item.problem.type_text">{{item.problem.type_text}}</div>
					<div class="margin_top2 text_h">
						<span class="color_zero">{{item.parent.name}}</span>
						<!-- <span class="color_nine">（{{item.parent.score}}分）</span> -->
					</div>
					<div class="margin_top1" v-if="item.parent.audio_text">
						<audio controls :src="item.parent.audio_text"></audio>
					</div>
					<div class="margin_top1" v-if="item.parent.image_text">
						<img :src="item.parent.image_text" alt=""
							@click="dialogVisibleimg=true;dialogImageUrl=item.parent.image_text;"
							style="width: 500px;height: 250px;">
					</div>
					<div class="margin_top2 text_h">
						<span class="color_zero">{{item.problem.name}}</span>
						<span class="color_nine">（{{item.total_score}}分）</span>
						<!-- <span class="typeBox" style="display: inline-block;">{{item.type_text}}</span> -->
					</div>
					<!-- 单选题 -->
					<div v-if="item.problem.type==1">
						<div :class="item.answer_content==ite.key?'selectFalse':item.correct_answer_content==ite.key?'selectTrue':'noSelect'"
							v-for="ite in item.problem.content_json" :key="ite.key" @click="changedxtvalue(item,ite)">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div>{{ite.value}}</div>
						</div>
					</div>
					<!-- 多选题 -->
					<div v-if="item.problem.type==2">
						<div :class="ite.daan==2?'selectFalse':ite.daan==1?'selectTrue':'noSelect'"
							v-for="ite in item.problem.content_json" :key="ite.key" @click="dxtclick(ite)">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div>{{ite.value}}</div>
						</div>
					</div>
					<!-- 判断题 -->
					<div v-if="item.problem.type==3">
						<div :class="item.answer_content==ite.key?'selectFalse':item.correct_answer_content==ite.key?'selectTrue':'noSelect'"
							v-for="ite in item.problem.content_json" :key="ite.key" @click="changepdtvalue(item,ite)">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div>{{ite.value}}</div>
						</div>
					</div>
					<!-- 连线题 -->
					<div class="flexbetween" v-if="item.problem.type==4">
						<canvas :id="'drawCanvas'+item.id" :width="contentwidth+'px'" :height="swiperHeight+'px'"
							style="position: absolute;left: 0;top: 0;z-index: -1;"></canvas>
						<div class="left">
							<div class="lineNo" :id="'left'+index+ind" v-for="(ite,ind) in item.left" :key="ind"
								@click="lineleft($event,item,ite)">
								{{ite.name}}
							</div>
						</div>
						<div class="right">
							<div class="lineNo" :id="'right'+index+ind" v-for="(ite,ind) in item.right" :key="ind"
								@click="lineright($event,item,ite)">
								{{ite.name}}
							</div>
						</div>
					</div>
					<!-- 填空题 -->
					<div v-if="item.problem.type==5">
						<div class="" v-for="(ite,ind) in item.cwda" :key="ite.key"
							:class="ite.daan==0?'selectFalse':'selectTrue'">
							<div class="text_ht margin_right2" :class="ite.daan==0?'color_red':'color_theme'">
								{{ite.key}}
							</div>
							<div class="flex1">
								<input :class="ite.daan==0?'color_red':'color_theme'" style="width: 100%;" type="text"
									disabled v-model="item.answer_content_json[ind].value">
							</div>
						</div>
					</div>
					<!-- 简答题 -->
					<div v-if="item.problem.type==6">
						<div class="margin_top2" style="width: 70%;">
							<el-input type="textarea" :autosize="{ minRows: 4}" resize="none" disabled
								v-model="item.answer_content">
							</el-input>
						</div>
					</div>
					<!-- 选择题解析 -->
					<div>
						<div v-if="item.problem.type==1 || item.problem.type==2 || item.problem.type==3">
							<div class="text_f margin_top2">
								<span class="color_three">正确答案：</span>
								<span class="color_theme">{{item.correct_answer_content}}</span>
							</div>
							<div class="text_f margin_top2">
								<span class="color_three">你的答案：</span>
								<span class="color_red">{{item.answer_content}}</span>
							</div>
						</div>
						<div v-if="item.problem.type==4">
							<div class="text_f margin_top2">
								<p class="color_three">正确答案：</p>
								<p class="color_theme" v-for="(ite,ind) in item.problem.answer_content_json" :key="ind">{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</p>
							</div>
							<div class="text_f margin_top2">
								<p class="color_three">你的答案：</p>
								<p class="color_red" v-for="(ite,ind) in item.answer_content_json" :key="ind">{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</p>
							</div>
						</div>
						<div v-if="item.problem.type==5">
							<div class="text_f margin_top2">
								<p class="color_three">正确答案：</p>
								<p class="color_theme" v-for="(ite,ind) in item.problem.answer_content_json" :key="ind">{{ite.key}}：{{ite.value}}</p>
							</div>
						</div>
						<div v-if="item.problem.type==6">
							<div class="text_f margin_top2">
								<span class="color_three">你的答案：</span>
								<span class="color_theme">{{item.answer_content}}</span>
							</div>
							<div class="text_f margin_top2">
								<span class="color_three">正确答案：</span>
								<span class="color_red">{{item.correct_answer_content}}</span>
							</div>
						</div>
						<div class="flex margin_top2">
							<div class="text_f color_three white_nowrap">答案解析：</div>
							<div>
								<!-- <video src=""></video> -->
								<!-- <div class="text_d color_zero">
                                    倡的教学观认为:教学是课程创生与开发的过程;教学是师生交往、积极互动、共同发展的过程;教学过程重于教学结果;教学更关注人而不只是科学。因此，本题选A。
                                </div> -->
								<div v-html="item.analysis_content"></div>
							</div>
						</div>
					</div>
					<!-- 连线题 -->
					<!-- <div class="flexbetween positionr">
                        <div class="left">
                            <div class="lineNo" v-for="item in lineInfo.left" :key="item.id"
                                @click="lineLeft($event,item)">{{item.name}}</div>
                        </div>
                        <canvas id="drawCanvas" width="620px" height="270px"
                            style="position: absolute;left: 50%;top: 20px;transform: translateX(-50%);"></canvas>
                        <div class="right">
                            <div class="lineNo" v-for="item in lineInfo.right" :key="item.id"
                                @click="lineRight($event,item)">
                                {{item.name}}</div>
                        </div>
                    </div> -->
				</div>
				<div class="flexleft mainpadding">
					<!-- 我的错题显示移除 -->
					<div class="removeBox margin_right3 pointer" @click="remove">移除</div>
					<div class="themeBtnbrSmall margin_right3" @click="upswiper()">上一题</div>
					<div class="themeBtnbr" @click="downswiper()" v-if="swipercurrent!=list.total-1">下一题</div>
					<div class="themeBtnbr" @click="downswiper(1)" v-if="swipercurrent==list.total-1">下一题</div>
				</div>
				<canvas id="myCanvas" width="400px" height="300px" style="position: absolute;"></canvas>
			</div>
			<!-- 错题卡 -->
			<!-- <div style="width: 23%;">
                <div class="mainpadding15 ffffff radius margin_top1">
                    <div class="text_dt color_zero">错题卡</div>
                    <div class="flexleft flex_wrap">
                        <div class="flexcenter itemBox" v-for="(item,index) in timu_list.length"
                            @click="dtkswiper(index)">
                            <div class="answerNowSelect pointer">{{item}}</div>
                        </div>
                    </div>
                </div>
            </div> -->
		</div>
		<el-dialog :visible.sync="dialogVisibleimg">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {
		problemdata,
		examination_answer,
		wrongList,
		removeWrong
	} from "@/API/examination"
	export default {
		data() {
			return {
				education_lesson_id: "",
				student_examination_id: "",
				duration: "",
				timu_list: [],
				swipercurrent: 0,
				dialogVisibleimg: false,
				dialogImageUrl: "",
				scrolltop: 0,
				contentwidth: window.innerWidth, //界面宽度
				flag: true,
				swiperHeight: 0, //当前题目高度

				listtype: "",
				list: {
					data: []
				}
			}
		},
		created() {
			let data = this.$route.query
			this.education_lesson_id = data.education_lesson_id
			this.student_examination_id = data.student_examination_id
			this.duration = data.duration
			this.listtype = this.$route.query.type
		},
		mounted() {
			window.addEventListener("scroll", this.scrolling);
			window.addEventListener("resize", this.handelresize);
			this.init()
		},
		watch: {
			"list.data"() {
				let _this = this;
				if (_this.flag == true && this.listtype == 4) {
					_this.flag = false
					_this.$nextTick(() => {
						_this.list.data.forEach((item, index) => {
							if (item.answer_content_json.length && index == 0) {
								let answer_content = JSON.parse(item.answer_content)
								answer_content.forEach((ans, ansind) => {
									let idname1 = "left" + index + ans.left
									let idname2 = "right" + index + ans.right
									let data = {
										leftid: ans.left + 'left',
										leftitem: item.left[ans.left],
										leftmsg: {
											x: 0,
											y: 0
										},
										rightid: ans.right + 'right',
										rightitem: item.right[ans.right],
										rightmsg: {
											x: 0,
											y: 0
										}
									}
									console.log(idname2, 99999);
									let res2 = document.getElementById(idname2)
										.getBoundingClientRect();
									console.log(res2, "》》》》》》");
									data.rightmsg.x = res2.right -
										res2.width
									data.rightmsg.y = res2.top + (res2.height / 2) - 82
									let res1 = document.getElementById(idname1)
										.getBoundingClientRect();
									data.leftmsg.x = res1.left
									data.leftmsg.y = res1.top + (res1.height / 2) - 82
									item.lxarr.push(data)
								})
								this.getswiperHeight()
								setTimeout(() => {
									this.huaxian()
								}, 100)
								this.lxFnshow(index)
							}
						})
					})
				}
			}
		},
		methods: {
			handelresize() { //监听窗口缩放大小
				console.log(window.devicePixelRatio);
				const t = window.devicePixelRatio
				document.body.style.zoom = 1 / t
				// this.contentwidth = window.innerWidth
			},
			scrolling() {
				// 滚动条距文档顶部的距离
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				// 滚动条滚动的距离
				let scrollStep = scrollTop - this.scrolltop;
				// 更新——滚动前，滚动条距文档顶部的距离
				this.scrolltop = scrollTop;
			},
			async remove() { //移除
				let res = await removeWrong({
					student_answer_id: this.list.data[this.swipercurrent].id
				})
				if (res.data.code == 1) {
					
					this.list.data.splice(this.swipercurrent, 1)
					if(Number(this.list.total)-1==this.swipercurrent){
						this.swipercurrent = this.swipercurrent-1
					}
					this.list.total = Number(this.list.total) - 1
					
					if (this.list.total) {
						this.$message.success("移除成功")
					} else {
						this.$message.success("当前类型题目已全部移除，1s后系统将自动返回！")
						setTimeout(() => {
							this.$router.go(-1)
						}, 1000)
						return false
					}
					let page = Number(this.page) + 1
					this.page = page
					this.init(page)
				} else {
					this.$message.error(res.data.msg)
				}
			},
			upswiper() { //上一题
				if(this.swipercurrent==0){
					return false
				}
				this.swipercurrent = this.swipercurrent - 1
				this.getswiperHeight()
				setTimeout(() => {
					this.huaxian()
				}, 100)
			},
			downswiper(val) { //下一题
				if(val==1){
					this.$message.warning("已是最后一题!")
					return false
				}
				this.swipercurrent = this.swipercurrent + 1
				this.getswiperHeight()
				setTimeout(() => {
					this.huaxian()
				}, 100)
			},

			huaxian() {
				let _this = this
				if (this.list.data[this.swipercurrent].problem.type == 4) {
					let item = _this.list.data[this.swipercurrent]
					if (item.answer_content_json.length) {
						let answer_content = JSON.parse(item.answer_content)
						console.log(answer_content, 1213);
						answer_content.forEach((ans, ansind) => {
							let idname1 = "left" + this.swipercurrent + ans.left
							let idname2 = "right" + this.swipercurrent + ans.right
							let data = {
								leftid: ans.left + 'left',
								leftitem: item.left[ans.left],
								leftmsg: {
									x: 0,
									y: 0
								},
								rightid: ans.right + 'right',
								rightitem: item.right[ans.right],
								rightmsg: {
									x: 0,
									y: 0
								}
							}
							console.log(idname2, 99999);
							let res2 = document.getElementById(idname2)
								.getBoundingClientRect();
							console.log(res2, "》》》》》》");
							data.rightmsg.x = res2.right -
								res2.width
							data.rightmsg.y = res2.top + (res2.height / 2) - 82 + this.scrolltop
							let res1 = document.getElementById(idname1)
								.getBoundingClientRect();
							data.leftmsg.x = res1.left
							data.leftmsg.y = res1.top + (res1.height / 2) - 82 + this.scrolltop
							item.lxarr.push(data)
						})

						this.getswiperHeight()
						this.lxFnshow(this.swipercurrent)
					}
				}
			},
			getswiperHeight() {
				let idname3 = "swiper" + this.list.data[this.swipercurrent].id
				setTimeout(() => {
					let res3 = document.getElementById(idname3).getBoundingClientRect();
					this.swiperHeight = res3.height + 227 //227为下划线上面的高度
				}, 50)
			},
			changedxtvalue(val1, val2) { //单选题处理
				val1.dxtvalue = val2.key;
			},
			changepdtvalue(val1, val2) { //判断题处理
				val1.pdtvalue = val2.key;
			},
			dxtclick(ite) { //多选题处理
				ite.is_check = ite.is_check ? false : true;
			},
			async init(page) {
				let _this = this;
				let res = await wrongList({
					page: page || 1,
					limit: 12,
					type: this.listtype
				})
				if (this.listtype == 2) {
					res.data.data.data.forEach(item => {
						let zqda = item.correct_answer_content.split(" ")
						let cwda = item.answer_content.split(" ")
						item.problem.content_json.forEach(ite => {
							this.$set(ite, "daan", 0)
							cwda.forEach(cw => {
								if (ite.key == cw) {
									ite.daan = 2
								}
							})
							zqda.forEach(zq => {
								if (ite.key == zq) {
									ite.daan = 1
								}
							})
						})
					})
					console.log(res.data, "jinglei");
				}
				if (this.listtype == 4) {
					res.data.data.data.forEach(item => {
						let left = []
						let right = []
						item.problem.content_json.forEach((ite, ind) => {
							left.push({
								id: ind, //id拿下标这样后边提交方便处理
								name: ite.left_value,
								ischeck: false, //连线题的ischeck跟多选区分开这样好查找
							})
							right.push({
								id: ind, //id拿下标这样后边提交方便处理
								name: ite.right_value,
								ischeck: false, //连线题的ischeck跟多选区分开这样好查找
							})
						})
						let correct_answer_content_json = JSON.parse(item.correct_answer_content)
						this.$set(item, "left", left);
						this.$set(item.problem, "correct_answer_content_json", correct_answer_content_json);
						this.$set(item, "right", right);
						this.$set(item, "lxarr", []);
					})
				}
				if (this.listtype == 5) {
					res.data.data.data.forEach(item => {
						let zqda = JSON.parse(item.correct_answer_content)
						let cwda = JSON.parse(item.answer_content)
						cwda.forEach(cw => {
							this.$set(cw, "daan", 0)
							zqda.forEach(zq => {
								if (cw.value == zq.value) {
									cw.daan = 1
								}
							})
						})
						this.$set(item, "cwda", cwda)
					})
					console.log(res.data, "jinglei");
				}
				if (res.data.code == 1) {
					this.list = res.data.data
					this.list.data = res.data.data.data
				}
				// httpRequest.request('/api/examination/getwronglist', 'GET', {
				// 	page: page || 1,
				// 	limit:12,
				// 	type:this.listtype
				// }, false, false, true).then(res => {

				// }).catch(err => {
				// 	httpRequest.toast(err.msg);
				// })
			},
			lxFnshow(current) {
				setTimeout(() => {
					let canvas = document.getElementById('drawCanvas' + this.list.data[current].id);
					let ctx = canvas.getContext("2d");
					let lxarr = this.list.data[current].lxarr
					console.log(lxarr, "嗨嗨嗨");
					// ctx.clearRect(0, 0, this.contentwidth, this.swiperHeight);
					ctx.beginPath()
					lxarr.forEach((item, index) => {
						console.log(item.leftmsg.x, item.leftmsg.y, "嗨嗨嗨222");
						console.log(item.rightmsg.x, item.rightmsg.y, "嗨嗨嗨222");
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
						ctx.strokeStyle = "#3478f5"
						ctx.stroke();
						ctx.closePath();
					})
				}, 100)

			},
			lxFnsmallshow(current, ind) {
				setTimeout(() => {
					let canvas = document.getElementById('drawCanvas' + this.list.data[current].children[ind].id);
					let ctx = canvas.getContext("2d");
					let lxarr = this.list.data[current].children[ind].lxarr
					console.log(lxarr, 9999);
					ctx.clearRect(0, 0, this.contentwidth, this.swiperHeight);
					ctx.beginPath()
					lxarr.forEach((item, index) => {
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
						ctx.strokeStyle = "#3478f5"
						ctx.stroke();
						ctx.closePath();
					})
				}, 100)
			},
			lxFn(current) {
				let canvas = document.getElementById('drawCanvas' + current.id);
				let ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, this.contentwidth, 3225);
				ctx.beginPath()
				console.log(current.lxarr, "退退退2");
				// ctx.moveTo(20, 20)
				// ctx.lineTo(40, 20)
				current.lxarr.forEach(item => {
					ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
					ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					ctx.strokeStyle = "#3478f5"
					ctx.stroke();
					ctx.closePath();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* #drawCanvas{
		
	} */
	/* 题目类型 */
	.typeBox {
		width: 54px;
		height: 25px;
		text-align: center;
		line-height: 25px;
		background: rgba(52, 120, 245, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	/* 选中且正确 */
	.selectTrue {
		width: 70%;
		padding: 15px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5 !important;
		display: flex;
		align-items: center;
		margin-top: 20px;
		position: relative;
	}

	.selectTrue::after {
		content: "";
		width: 30px;
		height: 18px;
		background-image: url("../../static/image/test/trueImg.png");
		background-size: 100% 100%;
		position: absolute;
		right: -1px;
		top: -1px;
	}

	/* 选中但正确 */
	.selectFalse {
		width: 70%;
		padding: 15px;
		background: #FFEBEB;
		border-radius: 7px 7px 7px 7px;
		opacity: 1;
		border: 1px solid #F43D38;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F43D38 !important;
		display: flex;
		align-items: center;
		margin-top: 20px;
		position: relative;
		cursor: pointer;
	}

	.selectFalse::after {
		content: "";
		width: 30px;
		height: 18px;
		background-image: url("../../static/image/test/falseImg.png");
		background-size: 100% 100%;
		position: absolute;
		right: -1px;
		top: -1px;
	}

	/* 选中 */
	.selected {
		width: 70%;
		padding: 15px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5 !important;
		display: flex;
		align-items: center;
		margin-top: 20px;
		cursor: pointer;
		position: relative;
	}

	/* 未选中 */
	.noSelect {
		width: 70%;
		padding: 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		align-items: center;
		margin-top: 20px;
		cursor: pointer;
	}

	.noSelect div:nth-child(1) {
		color: #000000;
	}

	.itemBox {
		width: 20%;
		margin-top: 20px;
	}

	/* 答题卡-已答题 */
	.answerSelected {
		width: 31px;
		height: 31px;
		text-align: center;
		line-height: 31px;
		background: #8E8E8E;
		border-radius: 50%;
		font-size: 13px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	/* 答题卡-正在答题 */
	.answerNowSelect {
		width: 31px;
		height: 31px;
		text-align: center;
		line-height: 31px;
		background: #3478F5;
		border-radius: 50%;
		font-size: 13px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	/* 答题卡-还未答题 */
	.answerNoSelect {
		width: 31px;
		height: 31px;
		text-align: center;
		line-height: 31px;
		background: #F2F8F8;
		border-radius: 50%;
		font-size: 13px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	::v-deep .el-dialog {
		border-radius: 7px;
	}

	.noTeacher {
		padding: 15px;
		background: rgba(255, 0, 0, .1);
		border-radius: 4px 4px 4px 4px;
	}

	.removeBox {
		padding: 10px 35px;
		background: rgba(255, 0, 0, 0.1);
		border-radius: 4px;
		border: 1px solid #FF0000;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.lineTrue {
		padding: 15px 40px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 17px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		margin-top: 20px;
	}

	.lineFalse {
		padding: 15px 40px;
		background: #FFEBEB;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #F43D38;
		font-size: 17px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #F43D38;
		margin-top: 20px;
	}

	.lineNo {
		cursor: pointer;
		padding: 15px 40px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		background-color: #f5f7fa;
		font-size: 17px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-top: 20px;
	}
</style>